{% extends 'base/base.html' %}
{% block title %}
    首页
{% endblock %}

{% block css %}
    <style>
        .author_name {
            float: right;
            margin-right: 20px;
            color: #231dff;
        }

        .author_name1 {
            float: right;
            margin-right: 10px;
        }

        .ruanjian {
            font-size: 16px;
            margin: 8px 15px;
            display: inline-block;
            padding: 8px 16px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 20px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .ruanjian:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            text-decoration: none;
            color: white;
            background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);
        }

        .category-title {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 20px;
            border-radius: 10px;
            margin: 20px 0 15px 0;
            font-weight: bold;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: none;
        }

        .category-container {
            margin-bottom: 30px;
            padding: 0 15px;
        }

        .category-items {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .carousel-caption h3 {
            font-size: 2.5em;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            margin-bottom: 15px;
        }

        .carousel-caption p {
            font-size: 1.3em;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
        }

        .carousel-inner img {
            border-radius: 10px;
        }

        .carousel-indicators li {
            background-color: #fff;
            border: 2px solid #667eea;
        }

        .carousel-indicators .active {
            background-color: #667eea;
        }

        .carousel-control {
            background: rgba(0, 0, 0, 0.3);
            width: 5%;
            border-radius: 5px;
        }

        .carousel-control:hover {
            background: rgba(0, 0, 0, 0.5);
        }

        .main-content {
            padding: 20px 0;
        }

        .no-categories {
            text-align: center;
            color: #6c757d;
            font-style: italic;
            padding: 40px 0;
            font-size: 1.1em;
        }
    </style>
{% endblock %}

{% block main %}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img style="height:450px;width: 1200px" src="https://haowallpaper.com/link/common/file/previewFileImg/17787018870181248" alt="...">
      <div class="carousel-caption">
        <h3>最大的资源互享网站</h3>
        <p>只有我知道你需要什么</p>
      </div>
    </div>
    <div class="item">
      <img style="height:450px;width: 1200px" src="https://haowallpaper.com/link/common/file/previewFileImg/17187919946239360" alt="...">
      <div class="carousel-caption">
        <h3>好好运动、好好学习、好好玩耍、好好吃饭、好好休息</h3>
        <p>龟仙流流派宗旨</p>
      </div>
    </div>
    <div class="item">
      <img style="height:450px;width: 1200px" src="https://haowallpaper.com/link/common/file/previewFileImg/17759388304395648" alt="...">
      <div class="carousel-caption">
        <h3>人生畏惧绕远的话是什么都办不到的</h3>
        <p>野原新之助</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<div class="main-content">
    {% for c in categorys %}
        {# 大类标题占一行 #}
        {% if c.children|length == 0 %}
        {% else %}
            <div class="category-container">
                <div class="list-group-item category-title">
                    <strong>{{ c.title }}</strong>
                </div>
                {# 再把属于这个大类的文章逐个列出来 #}
                {% if c.children|length != 0 %}
                <div class="category-items">
                    {% for article in c.children %}   {# 外键反向查询 #}
                        <a class="ruanjian" href="{% url 'main:category_detail' article.id %}">
                            {{ article.title }}
                        </a>
                    {% endfor %}
                </div>
                {% else %}
                {% endif %}
            </div>
        {% endif %}
    {% empty %}
        <div class="no-categories">暂无分类</div>
    {% endfor %}
</div>
{% endblock %}